<template>
  <div class="slot-table">
    <vxe-grid
      :seq-config="{
        startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
      }"
      :pager-config="tablePage"
      :data="tableData"
      :columns="tableColumn"
      max-height="500"
      border
      highlight-hover-row
      @cell-dblclick="cellClickEvent"
      @page-change="handlePageChange"
      row-class-name="my-row"
    >
      <!--使用 form 插槽-->
      <template #form>
        <vxe-form :data="tableForm.data" @submit="findList">
          <vxe-form-item
            v-for="item in tableForm.items"
            :title="item.title"
            :field="item.field"
            :key="item.field"
          >
            <template v-slot>
              <vxe-input
                v-if="item.itemRender.name == '$input'"
                v-model="tableForm.data[item.field]"
                placeholder="请输入"
              ></vxe-input>
              <vxe-select
                v-if="item.itemRender.name == '$select'"
                v-model="tableForm.data[item.field]"
                placeholder="请选择"
                @change="selectChange($event, item.field)"
              >
                <vxe-option
                  v-for="op in item.itemRender.options"
                  :key="op.text"
                  :value="op.value"
                  :label="op.text"
                ></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <template v-slot>
              <vxe-button status="primary" type="submit">查询</vxe-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #custName_default="{ row }">
        <div class="flex">
          <i
            v-if="!row.identityType || row.identityType == ''"
            class="sfz whg"
          ></i>
          <i
            v-else
            class="sfz"
            :class="[row.identityType == '1' ? 'dsh' : 'yhg']"
          ></i>
          <span>{{ row.custName }}</span>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  name: "ContentList",
  data() {
    return {
      tableForm: null,
      tableData: [],
      tableColumn: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: "center",
        layouts: [
          "PrevJump",
          "PrevPage",
          "Number",
          "NextPage",
          "NextJump",
          "FullJump",
          "Total",
        ],
        perfect: true,
      },
    };
  },
  props: {
    content: {
      type: Object,
      default: () => {
        return {};
      },
    },
    pageInfo: {
      type: Object,
    },
  },
  created() {
    this.tableForm = this.content.tableForm;
    this.tableColumn = this.content.tableColumn;
    this.tableData = this.content.tableData;
    this.tablePage = Object.assign(this.tablePage, this.pageInfo);
  },
  watch: {
    //对异步的options请求进行监听
    "tableForm.items": {
      handler() {
        this.tableForm.items = this.content.tableForm.items;
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 查找表格数据
     */
    async findList() {
      this.$emit("load", this.tableForm.data, 1);
    },

    /**
     * 单击单元格触发
     */
    cellClickEvent() {
      this.$emit("getrow", arguments[0].row);
    },
    //翻页
    handlePageChange({ currentPage }) {
      this.tablePage.currentPage = currentPage;
      this.$emit("load", this.tableForm.data, this.tablePage.currentPage);
    },
    selectChange($event, field) {
      this.$emit("formSelectChange", $event, field);
    },
  },
};
</script>

<style lang="scss" scoped>
.slot-table {
  ::v-deep .myrow {
    cursor: pointer;
  }
  .sfz {
    display: inline-block;
    width: 0.15rem;
    height: 0.15rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.05rem;

    &.yhg {
      background-image: url(~@/assets/imgs/order/p_yihegui.png);
    }

    &.whg {
      background-image: url(~@/assets/imgs/order/p_weihegui.png);
    }

    &.dsh {
      background-image: url(~@/assets/imgs/order/p_daihegui.png);
    }
  }
}
</style>
